import { Component, ReactNode } from "react";
import { ScrollView, View, Button, Text } from "@tarojs/components";
import { AtList, AtListItem, AtSearchBar } from "taro-ui";
import "./index.scss";
import Req from "../../utils/request";
import { delay } from "../../utils/kit";
import Taro from "@tarojs/taro";
import { getInfo } from '../../utils/auth'
export default class ExpenseStatistics extends Component {
  state = {
    value: "",
    loading: false,
    hasMore: true,
    currentPage: 1,
    list: [],
  };
  onChange = (val: string) => {
    this.setState({
      value: val,
    });
  };
  onActionClick = () => {
    console.log("开始搜索");
  };
  componentDidMount(): void {
    this.loadData();
  }

  loadData = () => {
    const user_info = getInfo();
    const { currentPage, list } = this.state;
    this.setState({
      loading: true,
    });
    Req.get("/project/expenses/census", {
      pageNum: currentPage,
      userId: user_info.userId,
      pageSize: 10,
    })
      .then((r) => {
        if (r.total - list.length === 0 || r.rows.length < 10) {
          this.setState({
            hasMore: false,
          });
        }
        this.setState({
          list: list.concat([...r.rows] as any),
          currentPage: currentPage + 1,
          loading: false,
        });
      })
      .catch((e) => {
        this.setState({
          loading: false,
        });
      });
  };
  onScrollDetchEnd = () => {
    const { loading } = this.state;
    if (loading) return;
    if (this.state.hasMore) {
      delay(300).then(() => {
        this.loadData();
      });
    } else {
      this.setState({
        loading: false,
      });
    }
  };
  goToDetail = (row: any) => {
    Taro.navigateTo({
      url: `/pages/expense-management/index?id=${row.futuresProjectId}`
    })
  }
  render(): ReactNode {
    const { list } = this.state;
    return (
      <View className="es-container">
        <View className="top-header p15">
          <AtSearchBar
            className="em-search-bar"
            value={this.state.value}
            onChange={this.onChange}
            onActionClick={this.onActionClick}
          />
        </View>
        <ScrollView
          onScrollToLower={this.onScrollDetchEnd}
          className="scroll_wrapper"
          scrollY
        >
          <AtList>
            {list.map((item: any, index) => {
              return (
                <AtListItem
                  key={index}
                  className="es-item no-arrow-space no-active-effect-item"
                  title={
                    <View className="es-item-title">
                      <Text>{item.title}</Text>
                    </View>
                  }
                  note={
                    <View className="es-item-content">
                      {item.FuturesProject.map((item2: any, index2) => {
                        return (

                          <View
                            hoverClass="hover-tab-btn"
                            onClick={() => {
                              this.goToDetail(item2)
                            }}
                            key={index2} className="es-i-c-item">
                            <Text className="es-i-c-item-t1">
                              {item2.bondsTitle}
                              <View className="date-tt">
                                  {item2.createTime}
                              </View>
                            </Text>
                            <View className="es-i-c-item-t2">
                              <Text className="es-i-c-item-t2-1">{item2.inAmout}</Text>
                              <Text className="es-i-c-item-t2-3">万元</Text>
                            </View>
                            <View className="es-i-c-item-t3">
                              <Text className="es-i-c-item-t2-2">{item2.outAmount}</Text>
                              <Text className="es-i-c-item-t2-3">万元</Text>
                            </View>
                          </View>

                        );
                      })}
                    </View>
                  }
                />
              );
            })}
          </AtList>
          <View className="em-center-text">
            <Text>{this.state.hasMore ? "加载中..." : "没有更多了"}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}
